<template>
    <div class="classManage zy-content ">
        <div class="searchBox">
            <Form label-position="right" :label-width="130" class="search-form">
            <Row>
                <Col span="5">
                    <FormItem label="班次名称：">
                        <Input type="text" v-model="paramsList.className" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32" clearable></Input>
                        <Input style="display:none"/>
                    </FormItem>
                </Col>
                <Col span="5" align="center">
                    <Button type="primary" @click="changeNum()" v-has="'basicClassPage'">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
            </Form>
        </div>
        <div class="btns clear" >
            <strong class="creatBtnleft" v-has="'basicClassDeleteClass'">
                <Button type="primary" shape="circle" v-if="allCheck" @click="delFaultCodeShowClick">批量删除</Button>
            </strong>
            <span  class="creatBtnright" @click="createfaultCodeShowH" v-has="'basicClassInsertClass'">
                <span><Icon type="ios-add-circle-outline"/></span><span class="rightbtn">添加</span>
            </span>
        </div>
        <div class="tableContent">
              <Table ellipsis ref="selection" :columns="columns" :data="dataArr" @on-selection-change="onSelectChange">
                <template slot-scope="{ row ,index}" slot="action">
                    <span class="operationBtn" @click="createfaultCodeShowH(row)" v-has="'basicClassUpdateClass'">{{$t('common.Edit')}}</span>
                    <span class="operationBtn" @click="delPrrShowH(row)" v-has="'basicClassDeleteClass'">{{$t('common.Delete')}}</span>
                </template>
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
        <Modal :mask-closable="false"
            v-model="create"
            :title="addtitle"
            width="900"
            max-height="800">
            <Form class="formList" :label-width="120">
                <Row>
                    <Col span="24">
                        <FormItem label="班次编号：" required>
                            <Input type="text" v-model="formItem.classId" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="班次名称：" required>
                            <Input type="text" v-model="formItem.className" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="班次时间段：" required>
                            <Row>
                                <Col span="11">
                                    <TimePicker format="HH:mm" placeholder="开始时间" v-model="formItem.startTime"></TimePicker>
                                </Col>
                                <Col span="2" align="center">~</Col>
                                <Col span="11">
                                    <TimePicker format="HH:mm" placeholder="结束时间" v-model="formItem.endTime"></TimePicker>
                                </Col>
                            </Row>
                        </FormItem>
                    </Col>
                    <Col span="24" align="center" style="margin-bottom:20px">
                        <Button icon="md-add" type="primary" @click="addPlan()">添加停机计划</Button>
                    </Col>
                    <Divider />
                    <Row v-for="(item,index) of formItem.planList" :key="index">
                        <Col span="11">
                            <FormItem label="停机计划：" required>
                                <Cascader :data="causeArr" v-model="item.causeId"></Cascader>
                            </FormItem>
                        </Col>
                        <Col span="11">
                            <FormItem label="计划时间段：" required>
                                <Row>
                                    <Col span="11">
                                        <TimePicker format="HH:mm" placeholder="开始时间" v-model="item.startTime"></TimePicker>
                                    </Col>
                                    <Col span="2" align="center">~</Col>
                                    <Col span="11">
                                        <TimePicker format="HH:mm" placeholder="结束时间" v-model="item.endTime"></TimePicker>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span="2" align="center">
                            <span class="iconName" @click="delPlan(index)"><Icon type="ios-trash-outline" /></span>
                        </Col>
                    </Row>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="default" @click="create = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loading"  @click="addOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false"
            v-model="delFaultCodeShowF"
            title=""
            >
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                    <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                     <span>{{$t('common.confirmDelete')}}</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default"  @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loading"  @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "classManage",
        components: {},
        data(){
            return{
                paramsList:{},
                formItem:{},
                addtitle:"",
                loading:false,
                create:false,
                pageNum:1,
                pageSize:10,
                total:0,
                pageSizeOption: [10,20,30,40],
                columns: [
                    {
                        key:'selection',
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '班次编号',
                        key: 'classId',
                        align: 'center'
                    },
                    {
                        title: '班次名称',
                        key: 'className',
                        align: 'center'
                    },
                    {
                        title: '开始时间',
                        key: 'startTime',
                        align: 'center'
                    },
                    {
                        title: '结束时间',
                        key: 'endTime',
                        align: 'center'
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        align: "center"
                    }
                ],
                dataArr: [],
                delFaultCodeShowF: false,//是否显示删除弹窗
                delIds:[],
                causeArr:[],
                allCheck:false,
            }
        },
        mounted(){
            this.getCauseTree()
            this.changeNum();
        },
        methods:{
            getCauseTree(){
                this.axios({
                    method: 'get',
                    url: '/basic/basicClass/getCauseTree',
                    params: {}
                }).then(res => {
                    if(res.code === 200){
                       this.causeArr = this.getCauseArr(res.data)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            getCauseArr(arr){
                arr.forEach((item) => {
                    item['value'] = item.id;
                    item['label'] = item.desc;
                    if (item.children!=null&&item.children.length>0){
                        this.getCauseArr(item.children)
                    }else{
                        item['children'] = []
                    }
                })
                return arr;
            },
            addPlan(){
                this.formItem.planList.push({
                    causeId:[],
                    startTime:'',
                    endTime:''
                })
            },
            delPlan(index){
                this.formItem.planList.splice(index, 1)
            },
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.paramsList) {
                  if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                  }
                }
                this.axios({
                    method: 'get',
                    url: '/basic/basicClass/page',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                       this.dataArr = res.data.list
                       this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            createfaultCodeShowH(row){//点击增加或编辑
                if(row.id){
                    this.addtitle = `${this.$t('common.Edit')}`
                    if(row.planVos&&row.planVos.length>0){
                        for(let item of row.planVos){
                            item.causeId = item.causeIds
                        }
                    }
                    this.formItem = {
                        ...row,
                        planList:[...row.planVos]
                    };
                }else{
                   this.addtitle = `${this.$t('common.New')}`
                    this.formItem = {
                        planList:[],
                    };
                }
                this.create = true;
            },
            addOk(){
                const mesArr = [
                    {name:this.formItem.classId,mes:'请输入班次编号'},
                    {name:this.formItem.className,mes:'请输入班次名称'},
                    {name:this.formItem.startTime,mes:'请选择开始时间'},
                    {name:this.formItem.endTime,mes:'请选择结束时间'},
                ]
                for(let item in mesArr){
                    if(mesArr[item].name ===null||mesArr[item].name ===undefined||mesArr[item].name ===""){
                        this.$Message.warning(({content:mesArr[item].mes,duration:6,closable:true}));
                        return false;
                    }
                }
                if(this.formItem.planList.length>0){
                    for(let item of this.formItem.planList){
                        if(item.causeId.length<1){
                            this.$Message.warning(({content:"停机计划不能为空",duration:6,closable:true}));
                            return false
                        }
                        if(item.startTime===undefined||item.startTime===null||item.startTime===''){
                            this.$Message.warning(({content:"计划时间段不能为空",duration:6,closable:true}));
                            return false
                        }
                        if(item.endTime===undefined||item.endTime===null||item.endTime===''){
                            this.$Message.warning(({content:"计划时间段不能为空",duration:6,closable:true}));
                            return false
                        }
                    }
                }
                let params = {};
                for (let key in this.formItem) {
                  if (this.formItem[key]) {
                    this.$set(params, key, this.formItem[key])
                  }
                }
                if(params.planList.length>0){
                    let bArr = []
                    bArr = params.planList.map((item)=>{
                        return {...item,causeId:item.causeId[item.causeId.length-1]}
                    })
                    params.planList = bArr
                }
                this.loading = true;
                if(params.id){
                    this.axios({
                        method: 'post',
                        url: '/basic/basicClass/updateClass',
                        data: params
                    }).then(res => {
                        this.loading = false;
                        if(res.code === 200){
                            this.changeNum();
                            this.$Message.success("编辑成功");
                            this.create = false;
                        }else{
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                        }
                    })
                }else{
                    this.axios({
                        method: 'post',
                        url: '/basic/basicClass/insertClass',
                        data: params
                    }).then(res => {
                        this.loading = false;
                        if(res.code === 200){
                            this.changeNum();
                            this.$Message.success("新增成功");
                            this.create = false;
                        }else{
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                        }
                    })
                }

            },
            onSelectChange(selection){
                let myArray = [];
                selection.map((item, index) => {
                    myArray.push(item.id);
                });
                this.delIds = myArray;
                if (selection.length >0) {
                    this.allCheck = true;
                } else {
                    this.allCheck = false;
                }
            },
            delFaultCodeShowClick(){//点击批量删除
                this.delFaultCodeShowF = true;
            },
            delPrrShowH(row) {
                //点击展示提示删除弹窗
                this.delFaultCodeShowF = true;
                this.delIds = []
                this.delIds.push(row.id);
            },
            deleteOk(){
                this.loading = true;
                this.axios({
                    method: 'get',
                    url: '/basic/basicClass/deleteClass',
                    params: {ids:this.delIds.join(',')}
                }).then(res => {
                    this.loading = false;
                    if(res.code === 200){
                        this.changeNum();
                        this.$Message.success("删除成功");
                        this.delFaultCodeShowF = false;
                        this.allCheck = false;
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .classManage{
        .formList{
            padding: 30px;
            .btn{
                margin-top: 20px;
                text-align: center;
                width: 100%;
                height: 40px;
            }
            .inputBorder{
                border: 1px solid #dcdee2;
                border-radius:4px;
            }
            .iconName{
                span{
                    font-size: 16px;
                }

            }
        }
    }
</style>

<style lang="scss">
     .iconName{
            font-size: 30px;
            line-height:26px;
            color: #c20000;
            cursor: pointer;
        }
</style>
